<template>
  <div>
    <van-nav-bar
      title="标题"
      right-text="搜索"
      left-arrow
      @click-left="$router.back()"
      @click-right="searchFn"
    >
      <template #title>
        <div class="search">
          <van-icon name="search" />
          <input type="text" v-model="keyword" />
        </div>
      </template>
    </van-nav-bar>
    <div class="history">
      <h3>历史记录</h3>
    </div>
    <div class="result">
      <h3>搜索结果</h3>
    </div>
  </div>
</template>

<script>
import { post_search_recommend } from "../api/news";
export default {
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    searchFn() {
      console.log(this.keyword);
      // post_search_recommend(this.keyword).then(res=>{

      // })
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__left {
  .van-icon-arrow-left {
    color: #000;
  }
}
/deep/.van-nav-bar__right {
  .van-nav-bar__text {
    color: #000;
  }
}

.van-nav-bar__title {
  width: 60%;
  .search {
    background-color: #f7f8fa;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    input {
      border: none;
      background-color: transparent;
    }
    .van-icon-search {
      color: #000;
    }
  }
}
.history {
  border: 1px solid #ddd;
}
</style>